<template>
  <div class="work-container">
    <div>
      <div class="add-name-box">
        <span class="add-name-text">{{explainTrue?'保养说明':'故障描述'}}</span>
      </div>
      <van-field
        v-model="deviceExplain"
        type="textarea"
        autosize
        placeholder="限输入100字"
        maxlength="100"
        show-word-limit
      />
    </div>
    <div>
      <div class="add-name-box">
        <span class="app-form-red">*</span>
        <span class="add-name-text">现场联系人</span>
      </div>
      <van-field
        v-model="workContacts"
        placeholder="限输入6字"
        :error-message="workContactsError"
        @input="workContacts = workContacts.replace(/^ +| +$/g,'')"
      />
    </div>
    <div>
      <div class="add-name-box">
        <span class="app-form-red">*</span>
        <span class="add-name-text">联系人电话</span>
      </div>
      <van-field
        v-model="workPhone"
        placeholder="请输入"
        :error-message="workPhoneError"
        @input="workPhone = workPhone.replace(/[^\d]/g, '')"
      />
    </div>

    <div class="workReport-padding">
      <div class="workReport-box">
        <div>
          <span class="add-name-text">现场图片</span>
          <div class="img-tips-text">图片不大于2M，最多不能超过5张</div>
        </div>
        <div class="img-box">
          <van-uploader
            v-model="imgList"
            max-count="5"
            :before-read="uploadImg"
          />
        </div>

      </div>
    </div>

    <div>
      <div class="add-name-box">
        <span class="add-name-text">设备地址</span>
      </div>
      <van-field
        v-model="deviceAddres"
        placeholder="限输入30字"
        maxlength="30"
        @input="deviceAddres = deviceAddres.replace(/^ +| +$/g,'')"
      />
    </div>

    <div class="button-margin">
      <van-button
        block
        type="info"
        @click="onSubmit()"
      >确 定</van-button>
    </div>

  </div>
</template>
<script>
import { getOrderList, updateOrder, uploadFile } from '@/api/maintenanceEngineer';
import { Form, ActionSheet, Cell, CellGroup, Field, Button, Switch, Uploader, Popup, Search, Toast } from 'vant';
export default {
  name: 'editWorkOrderManage',
  components: {
    [Form.name]: Form, //表单
    [ActionSheet.name]: ActionSheet, //动作面板
    [Field.name]: Field, //输入框
    [Button.name]: Button, //按钮
    [Switch.name]: Switch, //开关
    [Cell.name]: Cell, //单元格
    [CellGroup.name]: CellGroup, //单元格
    [Uploader.name]: Uploader, //上传文件
    [Popup.name]: Popup, //弹窗
    [Search.name]: Search,
    [Toast.name]: Toast //提示
  },
  data() {
    return {
      deviceExplain: '', //故障描述
      explainTrue: false, //判断是故障描述还是保养说明
      workContacts: '', //现场联系人
      workPhone: '', //联系人电话
      deviceAddres: '', //设备地址
      imgList: [],
      listData: '',
      workContactsError: '', //现场联系人提示
      workPhoneError: '' //联系人电话提示
    };
  },
  mounted() {
    this.onListData();
    this.explainTrue = this.$route.query.typeExplain === 2 ? true : false;
  },
  methods: {
    //列表数据
    onListData() {
      let params = {
        page: 1, //当前页
        page_size: 1, //每页显示数据条数
        order_no: this.$route.query.code
      };
      getOrderList(params).then(res => {
        this.listData = res.data.list;
        //编辑回显
        this.deviceExplain = res.data.list[0].description;
        this.workContacts = res.data.list[0].contacts;
        this.workPhone = res.data.list[0].contacts_tel;
        this.deviceAddres = res.data.list[0].address;
        let imgArr = JSON.parse(res.data.list[0].photos);
        imgArr.map(item => {
          this.imgList.push({ url: item });
        });
      });
    },
    //确定
    onSubmit() {
      this.workContactsError = '';
      this.workPhoneError = '';
      if (this.workContacts === '') {
        this.workContactsError = '现场联系人必填';
        return;
      }
      if (this.workPhone === '') {
        this.workPhoneError = '联系人电话必填';
        return;
      }
      let params = {};
      params.address = this.deviceAddres;
      params.contacts = this.workContacts;
      params.contacts_tel = this.workPhone;
      params.description = this.deviceExplain;
      params.id = this.listData[0].id;
      params.photos = [];
      this.imgList.forEach(res => {
        params.photos.push(res.url);
      });
      updateOrder(params).then(res => {
        Toast('修改成功');
        this.$router.go(-1);
      });
    },
    uploadImg(file) {
      //上传图片
      const isLt3M = file.size / 1024 / 1024 < 2;
      if (!isLt3M) {
        Toast('只能上传小于2M!');
        this.files = null;
        return;
      }
      this.files = file;
      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', this.files);
      uploadFile(formData).then(res => {
        this.imgList.push({ url: res.data.path });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.work-container {
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.866667rem;
}
.app-form-red {
  color: #f56c6c;
  font-size: 0.32rem;
}
.add-name-box {
  margin-left: 0.426667rem;
}
.add-name-text {
  color: #666666;
  font-size: 0.32rem;
}

::v-deep .van-field__value {
  border-bottom: 1px solid #f2f6fc;
  padding: 0.133333rem 0;
}
//上报供应商
.workReport-padding {
  padding: 0 0.426667rem;
  .workReport-box {
    border-bottom: 1px solid #f2f6fc;
  }
  .workReport-top {
    display: flex;
    justify-content: space-between;
  }
  .workReport-name-text {
    margin-top: 0.266667rem;
    color: #666666;
    font-size: 0.373333rem;
  }
  .workReport-tips-text {
    font-size: 0.346667rem;
    color: #999999;
    padding: 0.4rem 0;
  }
}
.img-box {
  margin-top: 0.426667rem;
}
.img-tips-text {
  font-size: 0.32rem;
  color: #999999;
  padding-top: 0.133333rem;
}

//按钮
.button-margin {
  margin: 0.426667rem;
  position: fixed;
  width: 91%;
  bottom: 0.053333rem;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}

//选择器
.van-popup--bottom {
  border-top-left-radius: 0.426667rem;
  border-top-right-radius: 0.426667rem;

  .var-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .var-box-header {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.213333rem;
      padding: 0 0.426667rem;
      padding-top: 0.426667rem;

      .model-name {
        margin-right: 0.266667rem;
        font-size: 0.426667rem;
        line-height: 0.533333rem;
      }

      .model-choose {
        flex-shrink: 0;
        color: var(--color-deep-gary);
        font-size: 0.32rem;
      }
    }

    .var-search-box {
      flex-shrink: 0;
      margin-bottom: 0.213333rem;
      border-bottom: 1px solid var(--border-color);
    }

    .var-list {
      flex: 1;
      width: 100%;
      padding: 0 0.426667rem;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.32rem 0;
        font-size: 0.373333rem;
        border-bottom: 1px solid var(--border-color);

        &:last-of-type {
          border-bottom: 0;
        }
      }
    }

    .operate-box {
      flex-shrink: 0;
      display: flex;
      width: 100%;
      height: 1.28rem;
      border-top: 1px solid var(--border-color);

      li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        font-size: 0.426667rem;

        &:first-of-type {
          &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            background-color: var(--border-color);
          }
        }
      }
    }
  }
}
</style>